<template>
  <div class="post-detail-container">
    <a-card class="post-card">
      <!-- 帖子标题和元信息 -->
      <a-spin :spinning="postLoading" tip="正在加载帖子内容...">
        <div class="post-header">
          <h1>{{ post.title }}</h1>
          <div class="post-meta">
            <a-space>
              <a-avatar :src="post.authorAvatar" />
              <span class="author">{{ post.authorName }}</span>
              <span class="time"><ClockCircleOutlined /> {{ formatTime(post.createdAt) }}</span>
              <a-tag color="blue">{{ post.categoryName }}</a-tag>
              <span class="views"><EyeOutlined /> {{ post.views }} 浏览</span>
            </a-space>
          </div>
          <div class="post-tags">
            <a-tag v-for="tag in post.tags" :key="tag.id" color="cyan">{{ tag.name }}</a-tag>
          </div>
        </div>

        <!-- 帖子内容 -->
        <div class="post-content">
          <MdPreview :modelValue="post.content" />
        </div>

        <!-- 操作按钮 -->
        <div class="post-actions">
          <a-space>
            <a-button :type="isLiked ? 'primary' : 'default'" @click="onLike" :loading="likeLoading">
              <template #icon>
                <LikeOutlined :style="{ color: isLiked ? '#1890ff' : undefined }" />
              </template>
              {{ isLiked ? '已点赞' : '点赞' }} {{ post.likes }}
            </a-button>
            <a-button @click="onCollect" :loading="favoriteLoading" :type="isFavorited ? 'primary' : 'default'">
              <template #icon>
                <StarOutlined :style="{ color: isFavorited ? '#faad14' : undefined }" />
              </template>
              {{ isFavorited ? '已收藏' : '收藏' }}
            </a-button>
            <a-button @click="onShare">
              <template #icon><ShareAltOutlined /></template>
              分享
            </a-button>
          </a-space>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
          <h3>评论 ({{ post.comments }})</h3>
          
          <!-- 评论输入框 -->
          <div class="comment-input">
            <a-comment>
              <template #avatar>
                <a-avatar :src="userStore.userInfo?.picture || '/default-avatar.png'" alt="current user" />
              </template>
              <template #content>
                <a-form-item>
                  <a-textarea v-model:value="commentContent" :rows="4" placeholder="说点什么..." />
                </a-form-item>
                <a-form-item class="comment-form-actions">
                  <a-button type="primary" @click="submitComment" :loading="submitting">
                    发表评论
                  </a-button>
                  <a-button v-if="replyToComment" style="margin-left: 8px" @click="cancelReply">
                    取消回复
                  </a-button>
                </a-form-item>
                <div v-if="replyToComment" class="reply-info">
                  <span>正在回复: <b>{{ replyToComment.nickname || replyToComment.username }}</b> 的评论</span>
                </div>
              </template>
            </a-comment>
          </div>

          <!-- 评论列表 -->
          <a-list
            class="comment-list"
            :data-source="comments"
            item-layout="horizontal"
            :loading="commentsLoading"
          >
            <template #renderItem="{ item }">
              <a-list-item class="comment-item">
                <a-comment
                  :author="item.nickname || item.username"
                  :avatar="item.avatar || item.userAvatar || item.picture || '/default-avatar.png'"
                  :content="item.content"
                  :datetime="formatTime(item.createdAt || item.createTime)"
                >
                  <template #actions>
                    <div class="comment-actions">
                      <span @click="showReplyBox(item)" class="comment-action reply-action">
                        <MessageOutlined /> 回复
                      </span>
                      <span v-if="item.likes > 0" class="comment-action">
                        <LikeOutlined /> {{ item.likes }}
                      </span>
                    </div>
                  </template>

                  <!-- 父评论的内联回复框 -->
                  <div v-if="activeReplyId === item.id && activeReplyType === 'parent'" class="inline-reply-box">
                    <a-comment>
                      <template #avatar>
                        <a-avatar :src="userStore.userInfo?.picture || '/default-avatar.png'" alt="current user" />
                      </template>
                      <template #content>
                        <a-form-item>
                          <a-textarea v-model:value="inlineReplyContent" :rows="2" placeholder="说点什么..." />
                        </a-form-item>
                        <a-form-item class="comment-form-actions">
                          <a-button type="primary" @click="submitInlineReply(item)" :loading="submitting" class="submit-button">
                            发表回复
                          </a-button>
                          <a-button @click="cancelInlineReply" class="cancel-button">
                            取消
                          </a-button>
                        </a-form-item>
                      </template>
                    </a-comment>
                  </div>

                  <!-- 子评论和回复部分 -->
                  <template v-if="item.children && item.children.length > 0">
                    <div class="replies-container">
                      <a-list
                        class="reply-list"
                        :data-source="item.children"
                      >
                        <template #header>
                          <div class="replies-header">
                            <CommentOutlined /> {{ item.children.length }}条回复
                          </div>
                        </template>
                        <template #renderItem="{ item: reply }">
                          <a-comment
                            class="reply-item"
                            :author="reply.nickname || reply.username"
                            :avatar="reply.avatar || reply.userAvatar || reply.picture || '/default-avatar.png'"
                            :datetime="formatTime(reply.createdAt || reply.createTime)"
                          >
                            <template #content>
                              <div class="reply-text-content">{{ reply.content }}</div>
                            </template>
                            <template #actions>
                              <div class="reply-actions">
                                <span @click="showReplyBox(item, reply)" class="comment-action reply-action">
                                  <MessageOutlined /> 回复
                                </span>
                                <span v-if="reply.likes > 0" class="comment-action">
                                  <LikeOutlined /> {{ reply.likes }}
                                </span>
                              </div>
                            </template>
                            
                            <!-- 子评论的内联回复框 -->
                            <div v-if="activeReplyId === item.id && activeReplyType === 'child' && activeChildReplyId === reply.id" class="inline-reply-box child-reply-box">
                              <a-comment>
                                <template #avatar>
                                  <a-avatar :src="userStore.userInfo?.picture || '/default-avatar.png'" alt="current user" />
                                </template>
                                <template #content>
                                  <a-form-item>
                                    <a-textarea v-model:value="inlineReplyContent" :rows="2" placeholder="说点什么..." />
                                  </a-form-item>
                                  <a-form-item class="comment-form-actions">
                                    <a-button type="primary" @click="submitInlineReply(item)" :loading="submitting" class="submit-button">
                                      发表回复
                                    </a-button>
                                    <a-button @click="cancelInlineReply" class="cancel-button">
                                      取消
                                    </a-button>
                                  </a-form-item>
                                </template>
                              </a-comment>
                            </div>
                          </a-comment>
                        </template>
                      </a-list>
                    </div>
                  </template>
                </a-comment>
              </a-list-item>
            </template>
            <template #empty>
              <div class="empty-comments">
                <p>暂无评论，快来抢沙发吧！</p>
              </div>
            </template>
          </a-list>
        </div>
      </a-spin>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import { getPostDetail, likePost, favoritePost, unfavoritePost, getPostLikeStatus, getPostFavoriteStatus } from '@/api/post'
import { getPostComments, createComment } from '@/api/comment'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import {
  LikeOutlined,
  StarOutlined,
  ShareAltOutlined,
  ClockCircleOutlined,
  EyeOutlined,
  MessageOutlined,
  CommentOutlined
} from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

const route = useRoute()
const userStore = useUserStore()
const post = ref({})
const comments = ref([])
const commentContent = ref('')
const commentsLoading = ref(false)
const postLoading = ref(false)
const replyToComment = ref(null)
const submitting = ref(false)
const activeReplyId = ref(null)
const activeReplyType = ref(null)
const activeChildReplyId = ref(null)
const inlineReplyContent = ref('')
const replyToUser = ref(null)
const isFavorited = ref(false)
const favoriteLoading = ref(false)
const isLiked = ref(false)
const likeLoading = ref(false)

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).fromNow()
}

// 获取帖子详情
const fetchPostDetail = async () => {
  try {
    postLoading.value = true
    const id = route.params.id
    const res = await getPostDetail(id)
    if (res.code === 200) {
      post.value = res.data
      await Promise.all([
        fetchComments(),
        checkLikeStatus(),
        checkFavoriteStatus()
      ])
    }
  } catch (error) {
    console.error('获取帖子详情失败:', error)
    message.error('获取帖子详情失败')
  } finally {
    postLoading.value = false
  }
}

// 检查点赞状态
const checkLikeStatus = async () => {
  if (!userStore.isLoggedIn || !post.value.id) return
  
  try {
    const res = await getPostLikeStatus(post.value.id, userStore.userInfo.id)
    if (res.code === 200) {
      isLiked.value = res.data
    }
  } catch (error) {
    console.error('获取点赞状态失败:', error)
    // 获取状态失败时，不影响用户体验，所以不显示错误消息
  }
}

// 检查收藏状态
const checkFavoriteStatus = async () => {
  if (!userStore.isLoggedIn || !post.value.id) return
  
  try {
    const res = await getPostFavoriteStatus(post.value.id, userStore.userInfo.id)
    if (res.code === 200) {
      isFavorited.value = res.data
    }
  } catch (error) {
    console.error('获取收藏状态失败:', error)
    // 获取状态失败时，不影响用户体验，所以不显示错误消息
  }
}

// 获取评论列表
const fetchComments = async () => {
  commentsLoading.value = true
  try {
    const response = await getPostComments(route.params.id)
    console.log("获取到评论响应:", response)
    
    // 检查不同的响应格式情况
    let rawComments = [];
    
    if (response && response.code === 200) {
      // 标准响应格式
      rawComments = response.data;
    } else if (response && !response.code) {
      // 响应拦截器已经解包，直接使用返回数据
      rawComments = response;
    } else {
      throw new Error('无效的评论数据格式')
    }
    
    // 将评论构建为树形结构
    comments.value = buildCommentTree(rawComments);
    console.log("构建的评论树:", comments.value);
    
  } catch (error) {
    console.error('获取评论失败:', error)
    message.error('获取评论失败，请刷新重试')
  } finally {
    commentsLoading.value = false
  }
}

// 构建评论树
const buildCommentTree = (comments) => {
  // 非数组则返回空数组
  if (!Array.isArray(comments)) {
    return [];
  }
  
  // 顶层评论和评论映射
  const topLevelComments = [];
  const commentMap = {};
  
  // 将每个评论添加到映射
  comments.forEach(comment => {
    // 确保每个评论有children数组
    comment.children = comment.children || [];
    commentMap[comment.id] = comment;
  });
  
  // 构建树
  comments.forEach(comment => {
    if (!comment.parentId) {
      // 顶层评论
      topLevelComments.push(comment);
    } else {
      // 子评论/回复
      const parent = commentMap[comment.parentId];
      if (parent) {
        parent.children.push(comment);
      } else {
        // 如果找不到父评论，作为顶层评论处理
        topLevelComments.push(comment);
      }
    }
  });
  
  return topLevelComments;
}

// 点赞
const onLike = async () => {
  if (!userStore.isLoggedIn) {
    message.warning('请先登录')
    return
  }
  
  try {
    likeLoading.value = true
    
    const res = await likePost(post.value.id, userStore.userInfo.id)
    if (res.code === 200) {
      const result = res.data
      // result为true表示点赞成功，false表示取消点赞
      isLiked.value = result
      post.value.likes = result ? post.value.likes + 1 : Math.max(0, post.value.likes - 1)
      message.success(result ? '点赞成功' : '已取消点赞')
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    message.error(isLiked.value ? '取消点赞失败' : '点赞失败')
  } finally {
    likeLoading.value = false
  }
}

// 收藏
const onCollect = async () => {
  if (!userStore.isLoggedIn) {
    message.warning('请先登录')
    return
  }

  try {
    favoriteLoading.value = true
    
    if (isFavorited.value) {
      // 取消收藏
      const res = await unfavoritePost(post.value.id, userStore.userInfo.id)
      if (res.code === 200) {
        isFavorited.value = false
        message.success('已取消收藏')
      }
    } else {
      // 添加收藏
      const res = await favoritePost(post.value.id, userStore.userInfo.id)
      if (res.code === 200) {
        isFavorited.value = true
        message.success('收藏成功')
      }
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    message.error(isFavorited.value ? '取消收藏失败' : '收藏失败')
  } finally {
    favoriteLoading.value = false
  }
}

// 分享
const onShare = () => {
  const url = window.location.href
  navigator.clipboard.writeText(url).then(() => {
    message.success('链接已复制到剪贴板')
  })
}

// 提交评论
const submitComment = async () => {
  if (!userStore.isLoggedIn) {
    message.warning('请先登录')
    return
  }

  if (!commentContent.value.trim()) {
    message.warning('请输入评论内容')
    return
  }

  try {
    submitting.value = true
    const res = await createComment({
      postId: post.value.id,
      content: commentContent.value.trim(),
      parentId: replyToComment.value ? replyToComment.value.id : null,
      userId: userStore.userInfo.id
    })
    
    if (res.code === 200) {
      message.success('评论成功')
      commentContent.value = ''
      replyToComment.value = null
      await fetchComments()
      post.value.comments++
    }
  } catch (error) {
    message.error('评论失败')
  } finally {
    submitting.value = false
  }
}

// 回复评论
const replyTo = (comment) => {
  if (!userStore.isLoggedIn) {
    message.warning('请先登录')
    return
  }
  replyToComment.value = comment
}

// 取消回复
const cancelReply = () => {
  replyToComment.value = null
}

// 显示内联回复
const showReplyBox = (comment, replyComment = null) => {
  activeReplyId.value = comment.id
  activeReplyType.value = replyComment ? 'child' : 'parent'
  activeChildReplyId.value = replyComment ? replyComment.id : null
  // 如果是回复评论下的回复，记录对谁回复
  if (replyComment) {
    replyToUser.value = {
      id: replyComment.userId,
      name: replyComment.nickname || replyComment.username
    }
    // 不再自动添加@用户名前缀
    inlineReplyContent.value = ''
  } else {
    replyToUser.value = {
      id: comment.userId,
      name: comment.nickname || comment.username
    }
    inlineReplyContent.value = ''
  }
}

// 取消内联回复
const cancelInlineReply = () => {
  activeReplyId.value = null
  activeReplyType.value = null
  activeChildReplyId.value = null
  inlineReplyContent.value = ''
  replyToUser.value = null
}

// 提交内联回复
const submitInlineReply = async (comment) => {
  if (!userStore.isLoggedIn) {
    message.warning('请先登录')
    return
  }

  if (!inlineReplyContent.value.trim()) {
    message.warning('请输入回复内容')
    return
  }

  try {
    submitting.value = true
    // 始终添加"回复[用户名]"的前缀
    let content = inlineReplyContent.value.trim()
    if (replyToUser.value) {
      // 检查用户是否已经手动添加了@用户名或"回复用户名"
      const userNamePattern = new RegExp(`(回复|@)\\s*${replyToUser.value.name}`, 'i');
      if (!userNamePattern.test(content)) {
        content = `回复 ${replyToUser.value.name}：${content}`
      }
    }
    
    const res = await createComment({
      postId: post.value.id,
      content: content,
      parentId: comment.id,
      userId: userStore.userInfo.id
    })
    
    if (res.code === 200) {
      message.success('回复成功')
      inlineReplyContent.value = ''
      activeReplyId.value = null
      activeReplyType.value = null
      activeChildReplyId.value = null
      replyToUser.value = null
      await fetchComments()
      post.value.comments++
    }
  } catch (error) {
    console.error('回复失败:', error)
    message.error('回复失败')
  } finally {
    submitting.value = false
  }
}

// 在组件加载完毕后获取帖子详情和评论
onMounted(async () => {
  await fetchPostDetail()
  await fetchComments()
})
</script>

<style lang="scss" scoped>
.post-detail-container {
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 24px;

  .post-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 24px;
    
    .post-header {
      margin-bottom: 28px;
      
      h1 {
        margin-bottom: 16px;
        font-size: 28px;
        font-weight: 600;
        color: #222;
      }
      
      .post-meta {
        :deep(.ant-avatar) {
          width: 48px !important;
          height: 48px !important;
          margin-right: 12px;
          border: 2px solid #f0f0f0;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .author {
          font-size: 16px;
          font-weight: 500;
          margin-right: 12px;
          color: #444;
        }
        
        .time {
          color: #777;
        }
      }
      
      .post-tags {
        margin-top: 12px;
      }
    }
    
    .post-content {
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 32px;
      
      :deep(.md-editor-preview) {
        padding: 0;
        background: none;
      }
    }
    
    .post-actions {
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .comments-section {
      margin-top: 24px;
      
      h3 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 24px;
        color: #444;
        border-left: 4px solid #1890ff;
        padding-left: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        
        &::before {
          content: '';
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: #1890ff;
          border-radius: 50%;
        }
      }
      
      .comment-list {
        margin-top: 24px;
        
        .comment-item {
          padding: 16px 0;
          transition: all 0.3s ease;
          border-radius: 8px;
          
          &:hover {
            background-color: #fafafa;
          }
        }
        
        .empty-comments {
          padding: 40px 0;
          text-align: center;
          color: #999;
          font-size: 15px;
          
          p {
            margin-bottom: 16px;
          }
        }
      }
      
      :deep(.ant-comment) {
        .ant-comment-inner {
          padding: 8px 0;
        }
        
        .ant-comment-content-author {
          margin-bottom: 8px;
          
          .ant-comment-content-author-name {
            font-size: 15px;
            font-weight: 500;
            color: #333;
          }
          
          .ant-comment-content-author-time {
            color: #999;
          }
        }
        
        .ant-comment-content-detail {
          font-size: 15px;
          line-height: 1.6;
          color: #444;
        }
        
        .ant-comment-avatar {
          margin-right: 16px;
          position: relative;
          z-index: 2;
          
          img {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f0f0f0;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            
            &:hover {
              transform: scale(1.05);
              border-color: #40a9ff;
            }
          }
        }
      }
      
      .comment-input {
        margin-bottom: 32px;
        border-radius: 8px;
        padding: 16px;
        background-color: #fafafa;
        
        :deep(.ant-comment-avatar) {
          img {
            width: 48px;
            height: 48px;
            border: 2px solid #e6f7ff;
          }
        }
        
        :deep(.ant-textarea) {
          border-radius: 4px;
          resize: vertical;
          min-height: 60px;
          transition: all 0.3s;
          border: 1px solid #e8e8e8;
          background-color: #fafafa;
          padding: 12px;
          font-size: 14px;
          
          &::placeholder {
            color: #b2b2b2;
            font-size: 13px;
          }
          
          &:focus, &:hover {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            background-color: white;
          }
        }
        
        .comment-form-actions {
          display: flex;
          margin-bottom: 0;
          
          button {
            border-radius: 4px;
            
            &.ant-btn-primary {
              background: linear-gradient(135deg, #1890ff, #096dd9);
            }
          }
        }
        
        .reply-info {
          margin-top: 8px;
          padding: 8px 12px;
          background-color: #f0f7ff;
          border-radius: 4px;
          color: #1890ff;
          font-size: 14px;
          border-left: 3px solid #1890ff;
          
          b {
            color: #096dd9;
            margin: 0 4px;
          }
        }
      }
      
      .replies-container {
        margin-top: 8px;
      }
      
      .replies-header {
        font-size: 14px;
        color: #666;
        padding: 8px 0;
        border-bottom: 1px dashed #f0f0f0;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      
      .reply-list {
        margin-left: 48px;
        width: 500px;
        background-color: rgba(0, 0, 0, 0.01);
        border-radius: 8px;
        padding: 12px 16px;
        margin-top: 8px;
        border: 1px solid #f0f0f0;
      }
      
      .reply-item {
        margin-bottom: 8px;
        padding-bottom: 8px;
        
        &:not(:last-child) {
          border-bottom: 1px dashed #f5f5f5;
        }
      }
      
      :deep(.reply-list .ant-comment) {
        .ant-comment-avatar {
          img {
            width: 32px;
            height: 32px;
            border: 1px solid #f0f0f0;
            border-radius: 50%;
            object-fit: cover;
          }
        }
        
        .ant-comment-content-author-name {
          font-size: 14px;
        }
        
        .ant-comment-content-detail {
          font-size: 14px;
          word-break: break-word;
          white-space: pre-wrap;
        }
      }
      
      .comment-actions, .reply-actions {
        display: flex;
        gap: 16px;
      }
      
      .comment-action {
        color: #1890ff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        
        &:hover {
          color: #40a9ff;
          text-decoration: underline;
        }
        
        &.reply-action {
          color: #52c41a;
          
          &:hover {
            color: #73d13d;
          }
        }
      }
      
      .inline-reply-box {
        margin: 16px 0 16px 48px;
        padding: 16px;
        background-color: #f9f9f9;
        border-radius: 8px;
        border-left: 3px solid #1890ff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        
        :deep(.ant-comment) {
          .ant-comment-avatar {
            img {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              border: 2px solid #f0f0f0;
            }
          }
        }
        
        :deep(.ant-textarea) {
          border-radius: 4px;
          resize: vertical;
          min-height: 60px;
          transition: all 0.3s;
          border: 1px solid #e8e8e8;
          background-color: #fafafa;
          padding: 12px;
          font-size: 14px;
          
          &::placeholder {
            color: #b2b2b2;
            font-size: 13px;
          }
          
          &:focus, &:hover {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            background-color: white;
          }
        }
        
        :deep(.comment-form-actions) {
          margin-top: 8px;
          margin-bottom: 0;
          display: flex;
          justify-content: flex-end;
          
          .ant-btn {
            margin-left: 8px;
            border-radius: 4px;
            transition: all 0.3s ease;
            
            &.submit-button {
              background: linear-gradient(135deg, #1890ff, #096dd9);
              border-color: #1890ff;
              color: white;
              font-weight: 500;
              
              &:hover {
                background: linear-gradient(135deg, #40a9ff, #1890ff);
                transform: translateY(-1px);
                box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
              }
              
              &:active {
                background: linear-gradient(135deg, #096dd9, #0050b3);
                transform: translateY(0);
              }
            }
            
            &.cancel-button {
              color: #595959;
              border-color: #d9d9d9;
              
              &:hover {
                color: #40a9ff;
                border-color: #40a9ff;
              }
            }
          }
        }
      }
    }
  }
}

.reply-text-content {
  padding: 8px 0;
  line-height: 1.6;
}

[class*="-text-content"] {
  white-space: pre-wrap;
  word-break: break-word;
}

.reply-prefix {
  font-weight: bold;
  color: #1890ff;
  margin-right: 4px;
}

.child-reply-box {
  margin: 12px 0 8px 32px;
  width: 90%;
  background-color: #f7fafc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border-left: 2px solid #91caff;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  :deep(.ant-comment) {
    .ant-comment-avatar {
      img {
        width: 30px;
        height: 30px;
        border: 1px solid #f0f0f0;
      }
    }
    
    .ant-comment-content {
      padding-left: 8px;
    }
  }
  
  :deep(.ant-textarea) {
    min-height: 50px;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    
    &:focus {
      border-color: #40a9ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }
  }
  
  :deep(.comment-form-actions) {
    margin-top: 6px;
    
    .ant-btn {
      font-size: 13px;
      height: 30px;
      padding: 0 15px;
      
      &.submit-button {
        background: linear-gradient(135deg, #40a9ff, #1890ff);
      }
    }
  }
}
</style> 